<template>
  <a-layout class="index">
    <!--    头部-->
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        v-model:selectedKeys="selectedKeys1"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
      </a-menu>
      <div
        style="
          color: #fff;
          display: flex;
          justify-content: flex-end;
          cursor: pointer;
        "
        @click="outLogin"
      >
        退出登录
      </div>
    </a-layout-header>

    <a-layout>
      <a-layout-sider width="200" style="background: #fff" v-if="menu">
        <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-menu-item v-for="(item, index) in menu" :key="index">
            <div @click="add(item)">
              <laptop-outlined />
              <span>{{ item.name }}</span>
            </div>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <!-- <a-breadcrumb style="margin: 16px 0">
                 <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit"  >
                   <a-tab-pane v-for="pane in panes"  :key="pane.key" :tab="pane.title" :closable="pane.closable"  >
                   {{ pane.path }}
                   </a-tab-pane>
                 </a-tabs>
               </a-breadcrumb> -->
        <a-layout-content
          :style="{
            background: '#f8f8f8',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<style lang="less">
@import "../assets/css/style/index.less";
@import "../assets/css/common.less";
</style>
<script>
import index from "../server/index.js";
export default index;
</script>
